<template>
  <div id="app">
    <top-nav></top-nav>
    <div id="per">
      <div id="per-left">
        <img :src="perimg" alt="" />
      </div>
      <div id="per-cont">
        <div class="namebox">
          <span class="name">{{ username }}的厨房</span>
          <span class="onimg"></span>
          <!-- <img :src="onimg" alt=""> -->
        </div>
        <div class="xijie">
          <span>{{ sex }}</span>
          <span>{{ address }}</span>
          <span>{{ join }} 加入</span>
        </div>
        <div class="perSay">
          {{ say }}
        </div>
      </div>
      <div id="per-right">
        <button v-show="guanzhubtn1" id="guanzhubtn1" @click="dguanzhubtn1">关注</button>
        <button v-show="guanzhubtn2" id="guanzhubtn2" @click="dguanzhubtn2">已关注</button>
        <div v-show="benren" id="setinfo" @click="dsetinfo">设置个人信息</div>
  <div v-show="benren" @click='caipubtn' id="caipubtn">添加菜谱</div>
        <div class="guanzhu">
          <span class="guanzhuspan1 span1">
            <span>关注的人</span>
            <span @click="fans">{{ follow }}</span>
          </span>
          <span class="guanzhuspan2 span1">
            <span>被关注</span>
            <span @click="star">{{ followed }}</span>
          </span>
        </div>
      </div>
    </div>
    <div id="nav1" ref="myselect">
      <div class="item" @click="nav1cli($event)">概述</div>
      <div class="item" @click="nav1cli($event)">菜谱</div>
      <div class="item" @click="nav1cli($event)">作品</div>
      <div class="item" @click="nav1cli($event)">收藏</div>
    </div>
    <router-view
      :username1="username"
      :arr="arr"
      :arr2="arr2"
      :arr3="arr3"
      :arr4="arr4"
      :myarr1='myarr1'
      :myarr2='myarr2'
      @updd1="upzlx"
      @shipu="shipu"
      @zuopin="zuopin"
    ></router-view>
    <button-nav></button-nav>
  </div>
</template>

<script>
export default {
  data: () => ({
    guanzhubtn1: "",
    guanzhubtn2: "",
    benren: "",
    email: "",
    perimg: "",
    username: "",
    onimg:
      "",
    sex: "",
    address: "",
    join: "",
    say: "",
    follow: "",
    followed: "",
    myarr1:[],
    myarr2:[],
    arr: [],
    arr2: [],
    arr3: [],
    arr4: [],
    userid:'',
  }),
  methods: {
    upzlx(myid) {
      window.localStorage.setItem('per_id',myid)
      this.$axios("/xlz/zlxuser", { params: { userid: myid } }).then((res) => {
        this.perimg = res.data[0].touxiang;
        this.username = res.data[0].username;
        this.sex = res.data[0].sex;
        this.say = res.data[0].say;
        this.address = res.data[0].address;
        this.join = res.data[0].jointime;
      });
      this.$axios("/xlz/zlxopus", { params: { userid: myid } }).then((res) => {
        this.arr = res.data;
        this.myarr1=this.arr.slice(0,9)
      });
      this.$axios("/xlz/zlxcook", { params: { userid: myid } }).then((res) => {
        this.arr2 = res.data;
        this.myarr2=this.arr2.slice(0,6)
      });
      this.$axios("/xlz/zlxfollow", { params: { userid: myid } }).then(
        (res) => {
          this.arr3 = res.data;
        }
      );
      this.$axios("/xlz/zlxfollow2", { params: { userid: myid } }).then(
        (res) => {
          this.arr4 = res.data;
        }
      );
      this.$router.push({ path: "/zlx/gaishu" });
    },
    fans() {
      this.$router.push({ path: "/zlx/fans" });
    },
    star() {
      this.$router.push({ path: "/zlx/star" });
    },
    nav1cli(that) {
      switch (that.path[0].innerHTML) {
        case "概述":
          this.$router.push({ path: "/zlx/gaishu" });
          break;
        case "菜谱":
          this.$router.push({ path: "/zlx/caipu" });
          break;
        case "作品":
          this.$router.push({ path: "/zlx/zuopin" });
          break;
      }
    },
    myselect() {
      for (let i = 0; i < this.$refs.myselect.children.length; i++) {
        this.$refs.myselect.children[i].style.backgroundColor = "#F5F6F5";
        this.$refs.myselect.children[i].style.color = "black";
      }
    },
    shipu() {
      this.$router.push({ path: "/zlx/caipu" });
      window.scrollTo(0, 0);
    },
    zuopin() {
      this.$router.push({ path: "/zlx/zuopin" });
      window.scrollTo(0, 0);
    },
    dguanzhubtn1(){
      this.$axios('/xlz/zlxguanzhu1',{params:{star:this.selfif,fans:this.userid}})
        this.benren = false;
            this.guanzhubtn1 = false;
            this.guanzhubtn2 = true;
    },
    dguanzhubtn2(){
       this.$axios('/xlz/zlxguanzhu2',{params:{star:this.selfif,fans:this.userid}})
        this.benren = false;
            this.guanzhubtn1 = true;
            this.guanzhubtn2 = false;
    },
    dsetinfo(){
      this.$router.push({ path: "/zlxinfo" });
    },
    caipubtn(){
     this.$router.push({ path: "/phxsecond" });
    }
  },
  mounted() {
    // let userid = 2;
    let selfif = window.localStorage.getItem("islogin");
    this.selfif=selfif
    let userid1 = this.$route.query.userid;
    let userid
    if(userid1){
      console.log(11);
    window.localStorage.setItem('per_id',userid1)
    userid=window.localStorage.getItem('per_id')
    this.userid=userid
    }
    else{
     userid=window.localStorage.getItem('per_id')
      this.userid=userid
    }
    this.$axios("/xlz/zlxuser", { params: { userid } }).then((res) => {
      this.perimg = res.data[0].touxiang;
      this.username = res.data[0].username;
      this.sex = res.data[0].sex;
      this.say = res.data[0].say;
      this.address = res.data[0].address;
      this.join = res.data[0].jointime;
      this.email = res.data[0].email;
      if (this.email == selfif) {
        console.log(this.email);
        console.log("是本人");
        this.benren = true;
        this.guanzhubtn1 = false;
        this.guanzhubtn2 = false;
      } else {
        this.$axios("/xlz/zlxfollow3", {
          params: { fans: userid, star: selfif },
        }).then((res2) => {
          if (res2.data[0]) {
            this.benren = false;
            this.guanzhubtn1 = false;
            this.guanzhubtn2 = true;
          } else {
            this.benren = false;
            this.guanzhubtn1 = true;
            this.guanzhubtn2 = false;
          }
        });
      }
    });
    this.$axios("/xlz/zlxopus", { params: { userid } }).then((res) => {
      this.arr = res.data;
      this.myarr1=this.arr.slice(0,9)
    });
    this.$axios("/xlz/zlxcook", { params: { userid } }).then((res) => {
      this.arr2 = res.data;
      this.myarr2=this.arr2.slice(0,6)
    });
    this.$axios("/xlz/zlxfollow", { params: { userid } }).then((res) => {
      this.arr3 = res.data;
      this.followed=res.data.length
    });
    this.$axios("/xlz/zlxfollow2", { params: { userid } }).then((res) => {
      this.arr4 = res.data;
      this.follow=res.data.length
    });
  },
  updated() {
    let str = window.location.href;
    let arr = str.split("/");
    switch (arr[arr.length - 1]) {
      case "caipu":
        this.myselect();
        this.$refs.myselect.children[1].style.backgroundColor = "#dd3915";
        this.$refs.myselect.children[1].style.color = "white";
        break;
      case "gaishu":
        this.myselect();
        this.$refs.myselect.children[0].style.backgroundColor = "#dd3915";
        this.$refs.myselect.children[0].style.color = "white";
        break;
      case "zuopin":
        this.myselect();
        this.$refs.myselect.children[2].style.backgroundColor = "#dd3915";
        this.$refs.myselect.children[2].style.color = "white";
        break;
      default:
        this.myselect();
        break;
    }
  },
};
</script>


<style scoped="true">
#app {
  width: 1000px;
  margin: 0 auto;
}
#per {
  margin-top: 30px;
  height: 160px;
  padding-bottom: 40px;
  display: flex;
}
#per-left img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}
#per-cont {
  margin: 0 30px 0 50px;
  width: 595px;
}
#per-cont .name {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  margin-right: 10px;
}
#per-cont .onimg {
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-image: url();
  background-repeat: no-repeat;
  /* background-position: -381px -39px; */
  margin-bottom: -4px;
}
#per-cont img {
  width: 30px;
  height: 30px;
}
#per-cont .xijie span {
  margin-right: 10px;
  color: #909090;
  font-size: 12px;
  line-height: 1.8;
}
#per-cont .perSay {
  margin-top: 10px;
  line-height: 1.8;
  font-size: 12px;
}
#per-right {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
#per-right button {
  width: 120px;
  height: 50px;
  background-color: #dd3915;
  border: 0;
  color: white;
  cursor: pointer;
}
#per-right .guanzhu {
  width: 136px;
  height: 38px;
  padding: 10px 15px;
  background-color: #f5f6f5;
  display: flex;
}
#per-right .guanzhu .guanzhuspan1 {
  border-right: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
    align-items: center;
    padding-right: 10px;
}
#per-right .guanzhu .guanzhuspan2{
  display: flex;
  flex-direction: column;
    align-items: center;
    padding-left:20px;
}
#per-right .guanzhu .span1 span:first-child {
  font-size: 12px;
  margin-bottom: 10px;
  color: #333;
}
#per-right .guanzhu .span1 span:last-child {
  font-weight: 700;
  font-size: 16px;
  color: #dd3915;
  text-decoration: none;
  cursor: pointer;
}
#per-right .guanzhu .span1 span:last-child:hover {
  background-color: #dd3915;
  color: white;
}
#nav1 {
  height: 48px;
  margin-bottom: 35px;
  background-color: #f5f6f5;
  display: flex;
}
#nav1 .item {
  min-width: 78px;
  text-align: center;
  line-height: 48px;
  border-right: 2px solid white;
  cursor: pointer;
}
#nav1 .item:first-child {
  background-color: #dd3915;
  color: white;
}
#nav1 .item:hover {
  background-color: #dd3915 !important;
  color: white !important;
}
#guanzhubtn2{
  background-color: #CCC7C2 !important;
}
#setinfo:hover{
  background-color: #CCC7C2;
  color: white;
  cursor: pointer;
}
#caipubtn{
  text-align: center;
  line-height: 40px;
  width: 80px;
  height: 40px;
  background-color: #dd3915;
  color: white ;
  cursor: pointer;
}
</style>